import React, { useState } from 'react';
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input, message } from 'antd';
import http from '../../api/http';
import { useNavigate } from 'react-router-dom'
import SliderCaptcha from 'rc-slider-captcha';

type FieldType = {
    account?: string;
    password?: string;
    remember?: string;
};


const App: React.FC = () => {
    const navigate = useNavigate()
    const [flag, setFlag] = useState(false)

    const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
        const res = await http.post('/login', values)
        console.log(res, '登录接口');
        const { token } = res.data;
        if (token) {
            localStorage.setItem('token', res.data.token);
            navigate('/')
        }
        if (!flag) {
            message.success('滑动');
            return
        }
    };

    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };


    // 滑块
    const handleSlideChange = (data) => {
        const slideW = 400;
        if (data.sliderOffsetX + 40 >= slideW * 0.98) {
            setFlag(true)
            return Promise.resolve();
        }
        return Promise.reject();
    }
    return (
        <div>
            <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item<FieldType>
                    label="用户名"
                    name="account"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item<FieldType>
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: '请输入密码!' }]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    label="滑动验证"
                    rules={[{ required: true, message: '请滑动滑块!' }]}
                >
                    <SliderCaptcha
                        mode="slider"
                        tipText={{
                            default: '请按住滑块，拖动到最右边',
                            moving: '请按住滑块，拖动到最右边',
                            error: '验证失败，请重新操作',
                            success: '验证成功'
                        }}
                        onVerify={handleSlideChange}
                        bgSize={{ width: 400, height: 150 }}
                    />
                </Form.Item>

                <Form.Item<FieldType> name="remember" valuePropName="checked" label={null}>
                    <Checkbox>记住我</Checkbox>
                </Form.Item>

                <Form.Item label={null}>
                    <Button type="primary" htmlType="submit">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
};

export default App;